<template>
  <div id="order_detail_view">
    <header class="mui-bar mui-bar-nav">
      <a class=" mui-icon  mui-pull-left  arr_left" @tap="close_this"></a>
      <h1 class="mui-title">订单详情</h1>
    </header>
    <div class="mui-content" id="order">
			<div class="mui-scroll-wrapper">
							<div class="order_list_info_top">
								<div class="order_list_info_top_text">订单编号：{{order_detail.order_no}}</div>
								<!--<div class="order_list_info_top_state " style="text-align: left;">{{order_detail.status|status_to_name}}</div>-->
							</div>
							<div class="order_list_info_container" v-for="(orders,k) in order_detail.goods" :key="k">
								<div @tap="go_detail(orders.goodsid)">
								<div class="order_list_info_container_img">
									<img :src="orders.pic" />
								</div>
								<div class="order_list_info_container_right">
									<div class="order_list_info_container_right_text">{{orders.name}}</div>
									<div class="order_list_info_container_right_num">X {{orders.num}}</div>
									<div class="order_list_info_container_right_price">￥{{orders.price}}</div>
								</div>
								</div>
							</div>
						
							<div class="order_list_info_bottom">
								<div class="order_list_info_bottom_productNum">共{{order_detail.num}}件商品</div>
								<div class="order_list_info_bottom_productAdd">合计</div>
								<div class="order_list_info_bottom_productPic">￥{{order_detail.money}}</div>
								<div style="clear: both;"></div>

								<div class="text_line">地址：{{order_detail.address}}</div>
								<div class="text_line">订单状态：{{order_detail.status|status_to_name}}</div>
								<div class="text_line">创建时间：{{order_detail.createtime|time_to_date}}</div>
								<div class="text_line">收货人：{{order_detail.name}}</div>

							</div>
		
			</div>

		</div>
  </div>
</template>

<script>
import util from "@/tools/util";
  export default {
    
    name:'order_detail_view',
    data(){
      return{
        order_detail:''
      }
    },
    methods:{
      close_this(){
        this.$store.commit("updata_open_order_detail_view",false)
      },
      go_detail(goodsid){
        console.log(goodsid);
        
        this.close_this();
        this.$router.push("/shop/goods_list/goods?goodsid="+goodsid)
      }
    },
    created(){
      this.order_detail = this.$store.state.goods.order_info;
      console.log(this.order_detail)

    },
    filters:{
      status_to_name(status){
        //状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭）） 
				switch(status) {
					case 1:
						return "待付款"
						break;
					case 2:
						return "待发货"
						break;
					case 3:
						return "待收货"
						break;
					case 4:
						return "已完成"
						break;

					default:
						break;
				}
      },
      time_to_date(t){
        return util.date_format(t*1000);
      }
    }
  }
</script>

<style scoped lang="less">
  #order_detail_view{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    background-color: #fff;
  }


/* -------订单页面--- */
.order_list_info_top{
	width:100%;
	height:0.96rem/0.625;
	overflow: hidden;
	padding: 0  0.4rem/0.625;
	background: #ffffff;
	clear: left;
	font-size: 0.373rem/0.625;
	line-height: 0.96rem/0.625;
}
.order_list_info_container{
	width:100%;
	height:2.933rem/0.625;
	background: #fafafa;
	padding:0.4rem/0.625;
	clear: left;
	margin-bottom: 0.133rem/0.625;
}
.order_list_info_bottom{
	width:100%;
	height:1.067rem/0.625;
	padding: 0  0.4rem/0.625;
	background: #ffffff;
	clear: left;
}
.order_list_info_top_text{
	width:50%;
	color:#353535;
	float: left;
}
.order_list_info_top_state{
	width:50%;
	color:#ff0000;
	float: left;
	text-align: right;
}
.order_list_info_container_img{
	width:2.133rem/0.625;
	height:2.133rem/0.625;
	float: left;
	overflow: hidden;
	border-radius: 0.053rem/0.625;
}
.order_list_info_container_img img{
	display: block;
	width:100%;
	height:100%;
}
.order_list_info_container_right{
	width:6.8rem/0.625;
	height:2.133rem/0.625;
	float: right;
}
.order_list_info_container_right_text{
	height:0.68rem/0.625;
	width:100%;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	color:#353535;
	line-height: 0.68rem/0.625;
	font-size: 0.373rem/0.625;
	text-align: right;
}
.order_list_info_container_right_num{
	height:0.507rem/0.625;
	width:100%;
	line-height: 0.507rem/0.625;
	text-align: right;
	font-size: 0.28rem/0.625;
	color:#888888;
}
.order_list_info_container_right_price{
	height:0.96rem/0.625;
	width:100%;
	text-align: right;
	line-height: 1.02rem/0.625;
	font-size: 0.507rem/0.625;
	color:#353535;
	font-weight: 600;
}
.order_list_info_bottom_productNum{
	width:2.08rem/0.625;
	height:1.067rem/0.625;
	line-height: 1.067rem/0.625;
	color:#353535;
	font-size: 0.293rem/0.625;
	float: left;
}
.order_list_info_bottom_productAdd{
	width:0.747rem/0.625;
	height:1.067rem/0.625;
	line-height: 1.067rem/0.625;
	color:#353535;
	font-size: 0.293rem/0.625;
	float: left;
}
.order_list_info_bottom_productPic{
	width:2.107rem/0.625;
	height:1.067rem/0.625;
	line-height:1.067rem/0.625 ;
	font-size: 0.507rem/0.625;
	color:#353535;
	font-weight: 600;
	float: left;
}
.order_list_info_bottom_productBtn{
	width:4.267rem/0.625;
	height:1.067rem/0.625;
	overflow: hidden;
	float: right;
	padding-top: 0.1735rem/0.625;
}
.order_list_info_bottom_productBtn_left,.order_list_info_bottom_productBtn_right{
/*	height:0.587rem/0.625;*/
	line-height: 0.587rem/0.625;
	padding: 0 0.267rem/0.625;
	font-size: 0.373rem/0.625;
	text-align: center;
	float: right;
}
.order_list_info_bottom_productBtn div:first-child{
	margin-left: 0.267rem/0.625;
}
.order_list_info_bottom_productBtn_one{
	border: 1px solid #ff0000;
	border-radius: 0.133rem/0.625;
	color:#ff0000;
	
}
.order_list_info_bottom_productBtn_two{
	border: 1px solid #353535;
	border-radius: 0.133rem/0.625;
	color:#353535;
}
.order_list_info_bottom_productBtn_three{
	border: 1px solid #888888;
	border-radius: 0.133rem/0.625;
	color:#888888;
}


.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			.mui-title {
				color: #353535;
			}
			
			.mui-slider-indicator.mui-segmented-control {
				background: #ffffff;
			}
			
			.mui-bar {
				background: #ffffff;
			}
			
			.mui-bar-nav {
				top: 0;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mui-bar {
				border-bottom: 1px solid #E4E4E4;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.mui-content {
				background: #f6f6f6;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				/*	margin-bottom: 0.133rem/0.625;*/
				background-color: #1C83FC;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #1C83FC;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 1.28rem/0.625;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
				border: none;
			}
			
			.mui-bar .mui-title {
				font-size: 0.48rem/0.625;
				font-family: 'PingFangSC-Semibold';
			}
			
			.mui-col-xs-4 {
				width: 25%;
			}
			
			.mui-slider-indicator.mui-segmented-control {
				position: fixed;
				z-index: 999;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				position: fixed;
				top: 2.453rem/0.625
			}
			
			.mui-slider .mui-slider-group {
				margin-top: 1.57rem/0.625;
			}
			
			.mui-scroll-wrapper {
				position: static;
			}
			
			.mui-scroll {
				position: static;
			}
			
			.mui-table-view-cell {
				padding: 0;
				margin-bottom: 0.2667rem/0.625;
			}
			
			.mui-table-view-cell.mui-active {
				background-color: #ffffff!important;
			}
			
			.mui-table-view {
				background: #f6f6f6;
			}
			
			.mui-table-view-cell {
				position: static;
				background: #ffffff;
			}
			
			.mui-segmented-control .mui-control-item {
				font-size: 0.4rem/0.625;
			}
			
			html,
			body {
				height: 100%;
				background-color: #f6f6f6;
			}
			
			.top_nav {
				height: 50px;
				background-color: #FFFFFF;
				position: fixed;
				top: 44px;
				left: 0;
				z-index: 1000;
				padding: 0 15px;
				width: 100%;
			}
			
			.top_bg {
				height: 60px;
				background-color: #F6F6F6;
			}
			
			.top_nav_item {
				width: 25%;
				float: left;
				height: 50px;
				text-align: center;
				line-height: 50px;
				border-bottom: 1px solid transparent;
			}
			
			.top_nav .active {
				border-bottom: 1px solid #007aff;
			}.text_line{
				width:100%;
    height: 1.067rem/0.625;
    line-height: 1.067rem/0.625;
    color: #353535;
    font-size: 0.293rem/0.625;
 
			}
			.order_list_info_bottom{
				height: auto;
			}
			.order_list_info_top_text{
				width: 100%;
			}
</style>
